<template>
  <el-scrollbar>
    <div class="box-content">
      <div class="title"><span>3</span>. {{ plugin.lang('config.three.title') }}</div>
      <div class="body">{{ plugin.lang('config.three.body') }}</div>
      <el-table v-loading="clientLoading" :data="data" style="width: 100%;">
        <el-table-column :label="plugin.lang('client.id')" prop="id">
          <template #default="scope">
            <el-link :type="config.client_id == scope.row.id ? 'primary' : 'default'" @click="onUpdate(scope.row.id, scope.row.state)">{{ scope.row.id }}</el-link>
          </template>
        </el-table-column>
        <el-table-column  width="100" align="right" header-align="right" :label="plugin.lang('client.status')" prop="status">
          <template #default="scope">
            <el-tag :type="scope.row.state == 'DISABLED' ? 'warning' : 'success'">
              {{ plugin.lang('client.status_text.' + scope.row.state) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button type="primary" size="large" :loading="loading" @click="onAdd" style="width:100%">{{ plugin.lang('client.add') }}</el-button>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import { ref } from 'vue';
import app from '@/app'
import model from '../../model'

export default {
  setup() {
    const data = model.client
    const config = model.data
    const clientLoading = model.clientLoading

    // 更新
    const loading = ref(false)
    const onAdd = () => {
      loading.value = true
      model.addClient().then(res => {
        onUpdate(res.id)
      }).finally(() => {
        loading.value = false
      })
    }

    const onUpdate = (id, state) => {
      if(state != 'DISABLED') {
        model.updateClient(id)
      } else {
        app.plugin.index.message('warning', 'client.update')
      }
    }

    return {
      plugin: app.plugin.index,
      data,
      config,
      loading,
      clientLoading,
      onAdd,
      onUpdate
    }
  }
}
</script>